<template>
	<view class="content">
<!--		<image :src="img"></image>-->
<!--		<view class="text">{{text}}</view>-->
   <!-- <rich-text :nodes="text" class="text ql-editor"></rich-text> -->
    <mp-html :content="text" class="text ql-editor"/>
<!--    <u-parse :content="text"class="text"></u-parse>-->
  </view>
</template>

<script>
	export default {
		data() {
			return {
				img: "",
        text:""
			}
		},
		
		onLoad(options) {
      let that=this;
			console.log(options)
			if(options.img) {
				this.img = options.img
			}
      if(options.text) {
        this.text = JSON.parse(options.text)
      }
      if (options.bannerId){
        this.$api.request({
              url:this.$api.bannerInfo+"?id="+options.bannerId,
            }
        ).then(res=>{
          this.text=that.repairRichText(res.data.content)
          console.log(this.text)
        })
      }
      if (options.iconId){
        this.$api.request({
              url:this.$api.iconInfo+"?id="+options.iconId,
            }
        ).then(res=>{
          that.text=that.repairRichText(res.data.content)
        })
      }
		},
		
		methods: {
			repairRichText(content){
        console.log("123")
        return content.replaceAll('<img ', '<img class="rich-img" style="max-width:100%;height:auto;display:block;margin:10px 0;"')
        // return content
      }
		}
	}
</script>

<style lang="less" scoped>
.content {

	display: flex;
	flex-direction: column;
	align-items: center;
  margin:20rpx;

  img{width: 100%;}
	image {
		margin-top: 20rpx;
    width: 100%;
    margin-right:20rpx;
    margin-left:20rpx;

	}
	.text {
    width: 100%;
    display:block;

    //margin-top: 20rpx;
    margin:10px 0;
    max-width:100%;
    height:auto;

    img{width: 100%;
      //margin:10px 0;
      //display:block;
    }

	}
}
</style>
